<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
        </script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->
<style>
     .quanti{
      /* background: url(../img/QQ图片20200226123957.jpg) no-repeat; */
      /* text-align: center; */
      width: 80%;
      margin: auto;
      
    } 
     /* .fudong{
    position: relative;
     } */
     .xialan{
    height: 120px;  
    /* position: fixed; */
    background-color: bisque;
    text-align: center;
     }

     /* .nav-link{
      margin-bottom: 20%;
      
      
     } */
  </style>
</head>

<body>
    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>

    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>

    <!-- the body of your page goes here -->
    <!-- stuff -->
    <div class="quanti">
      <div class="fudong">
        <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="./images/lbt1.jpg" class="d-block w-100" alt="..." height="500px">
            </div>
            <div class="carousel-item">
              <img src="./images/lbt2.jpg" class="d-block w-100" alt="..." height="500px">
            </div>
            <div class="carousel-item">
              <img src="./images/lbt3.jpg" class="d-block w-100" alt="..." height="500px">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>

<div class="jieshao">
  <h4>Time management, simply put, is to improve the efficiency and quality of time use through scientific and reasonable planning and control. In modern society, time is regarded as one of the most precious resources. And good time management can help us better arrange work and life, improve efficiency and productivity.</h4>
  <br>
    <h4>With proper time management, we can get a clear picture of the time and resources required for each task, thereby optimizing the workflow and reducing unnecessary waste. Good time management also helps us focus, reduce distractions, and accomplish tasks more efficiently. When the time is properly arranged, our work pressure will be correspondingly reduced, the mood is more relaxed, and thus improve work efficiency.</h4>
    <br>
  <h4>Time management is closely related to productivity and is essential for modern people. Only by mastering the skills of time management can we better cope with the fast-paced life, improve work efficiency and enjoy a better life.</h4>
</div>

<div class="row row-cols-1 row-cols-md-2 g-3" >
  <img src="/images/zjtp.jpg" class="d-block w-20" alt="..." height="420px" >
  <img src="/images/zjtp2.jpg" class="d-block w-20" alt="..." height="420px" >
</div>

    <div class="accordion" id="accordionExample">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Time management method
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
          <div class="accordion-body">

            <div class="fangfa">
              <h2></h2>
              <div class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl1.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Track time consumed</h5>
                      <p class="card-text">Time tracking is a time management technique used to record working hours. It helps measure working hours and provides information on how much time we spend on each particular task.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl2.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Time blocking</h5>
                      <p class="card-text">Time blocking is an approach that combines task management with calendar. The idea is to break up the day into "chunks" and assign tasks to focus on each chunk.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl3.jfif" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Eat That Frog</h5>
                      <p class="card-text">Each day, determine what your most important task is. That's your frog, the task that will have the biggest impact on your work. Start the day by killing this frog. Train yourself to start with the most important task and finish that task without interruption.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl4.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Pomodoro Technique</h5>
                      <p class="card-text">The Pomodoro technique is a simple time management system that forces you to focus on single tasks. The Pomodoro technique is arguably one of the simplest yet most effective time management techniques. Eliminate all distractions and set the timer for 25 minutes. During this time, you can only carry out one task. 25 minutes doesn't sound like much. But it was 25 minutes of completely uninterrupted, deep work.</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl5.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Eisenhower matrix</h5>
                      <p class="card-text">Knowing how to prioritize your work is an essential time management technique. When everything is limited, it is not a priority. Not all tasks are created equal. The Eisenhower Matrix helps you identify the most important tasks. Tasks can be divided into four quadrants: urgent and important, important but not urgent, urgent but not important and neither urgent nor important.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl6.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Work according to your energy level</h5>
                      <p class="card-text">Your level of energy affects your productivity. Therefore, you should schedule key tasks during your most productive hours. Figure out when you're most productive, and then schedule those hours for deep work. shallow work is sometimes called "shallow work" when you're low on energy.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl7.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">suppress interference</h5>
                      <p class="card-text">Turn off all notifications on your phone and computer, put your phone away from your work area, and wear noise-cancelling headphones. If you look busy and working, others are less likely to bother you.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl8.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Follow the 80/20 rule</h5>
                      <p class="card-text">The vast majority of the outcome is determined by a small number of things. To manage your time more effectively, focus on the 20% of tasks that deliver 80% of results. Use this time management technique to perform the most impactful tasks.</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl9.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">processing batch</h5>
                      <p class="card-text">Batch processing is the grouping of similar specific tasks together. Their thoughts are less distracting and focus longer. Doing all your emails at once, or getting a week's worth of cooking ready on Sunday, is batch processing. This time management technique allows you to accomplish many tasks efficiently. That way your flow can be maintained, because those activities require a similar way of thinking.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl10.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">task automation</h5>
                      <p class="card-text">Not automating these tasks is a waste of valuable time. Thousands of hours are wasted every year. Putting some everyday tasks on autopilot is key to being smart.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl11.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">The To-Don't List</h5>
                      <p class="card-text">In mathematics, there is a problem solving technique called inversion. Start with the end, and then work backwards from the known conditions. Inversion is a powerful tool. This can force you to find hidden ideas about the problem to be solved. You need to think about how to minimize the negative impacts rather than maximizing the positive impacts.</p>
                    </div>
                  </div>
                </div>
                <div class="col">
                  <div class="card h-100">
                    <img src="images/sjgl12.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Set time constraints</h5>
                      <p class="card-text">When you determine how much time it takes to complete a particular task, you become more productive. That's why we created the deadline. Parkinson's Law states: "Work is increased within the time allowed to complete it, until all the time is occupied." More time is not always better. So if you reduce the amount of time it takes to complete a task, you force your brain to concentrate on that task. Set deadlines, even if you don't need them. Giving less time to complete a task forces the brain to focus.</p>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
        </div>
      </div>
 
    </br>    
<div class="weiye">
  <h4>Reasonable time management can provide people with good ways to do things, so as to improve people's productivity. Here, we can provide you with reasonable time management help, our app has alarm clock, schedule, to-do list, time management method recommendations and some useful time management knowledge. We hope this content will be helpful to you and thank you for using our app.</h4>
</div>

    </div>
    </div>


    <div class="xialan">   
      <h2>DG9-02</h2>
    <br>
    <div>
      <h3>group member:  HongshengLiang   GuanchengPan   JinquanYi   GuanghengHuang   YixueLiu</h3>
      </div>
</div>


</div>
    </div>
    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>

    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    <script src="./scripts/skeleton.js"></script>
    <!-- <script src="./scripts/script.js"></script> -->
    <script src="./scripts/main.js"></script>
</body>

</html>